$(function() {
    let amgs;
    layui.use('form', function() { //此段代码必不可少
        var form = layui.form;
        form.render();
    });
    var $image = $('#image')
    $('.cover-left').on('click', function() {
            // alert('dada')
            $('#coverFile').click()
        })
        // 当用户选择了新文件,则更换裁剪区域的图片
    $('#coverFile').on('change', function() {
            // 获取用户选择的文件列表(文件选择框dom对象,files)
            const fileList = this.files
            if (fileList.length <= 0) {
                return layui.layer.msg('请选择图片文件', {
                    icon: 5
                })
            }
            // 获取用户选择的文件
            // 索引为0是图片的信息,索引1是选项的length
            const file = fileList[0]
                // console.log(file);
                // URL.createObjectURL 获取文件对象在内存中的url地址
            const newImgUrl = URL.createObjectURL(file)
            $image.attr('src', newImgUrl) // 重新设置图片的路径

            $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                width: 200,
                height: 160
            })
            let form = new FormData()
            form.append('file', file);
            $.ajax({
                method: 'post',
                data: form,
                contentType: false,
                processData: false,
                url: 'http://121.4.102.44:8083/common/upload',
                success: function(res) {
                    amgs = res.data
                },
            })

        })
        //修改
    $('.dis_flavor').show()
    let ids = localStorage.getItem('IDS')
    let catenames = localStorage.getItem('catename')
        // console.log(catenames);
        // $('[name=cate_id]').val(catenames)
    renderUpdate()
    let Data = null
    initCate()

    function initCate() {
        $.ajax({
            url: 'http://121.4.102.44:8083/category/list',
            success(res) {
                console.log(res, '菜品f列表');
                // if (res.type !== 1) {
                //     return layer.msg(res.message, { icon: 5 })
                // }
                const htmlStr = template('tpl-cate', res)
                    // console.log(htmlStr);
                $('[name=cate_id]').html(htmlStr)
                layui.form.render()
            }
        })
    }
    let caid;
    layui.form.on('select(categoryId)', function(data) {
        caid = data.value
    });

    function renderUpdate() {
        // 渲染分类列表
        initCate()
            // console.log(ids);
        $.ajax({
            url: 'http://121.4.102.44:8083/dish/' + ids,
            success(res) {
                // 定义一个异步计时器，分类列表刷新后，选中当前分类
                timer = setTimeout(function() {
                        $('#' + res.data.categoryId).prop('selected', true)
                        layui.form.render()
                    }, 100)
                    // console.log(res.data.categoryId);
                console.log(res, '菜品信息');
                const htmlStr3 = template('xrym4', res.data)
                    // 渲染信息
                Data = res.data
                $('.my-right').html(htmlStr3)
                $('.catename').val(res.data.name)
                $('[name=price]').val(res.data.price)
                    // $('#demo2').val(res.data.flavors[0].name)
                $('#image').css({
                    width: '200px',
                    height: '160px',
                })
                $('#image').prop('src', 'http://121.4.102.44:8083/common/download' + '?name=' + res.data.image)
                $('#form-add').on('submit', function(e) {
                    // console.log(caid);
                    e.preventDefault()
                        // 把动态生成的处理完口味装到数组中
                    let arr = []
                    $('.item').each((e, V) => {
                        console.log($(V).html().length);
                        if ($(V).html().length < 11) {
                            arr.push($(V).html().substring(0, 2))
                        } else {
                            arr.push($(V).html().substring(0, 3))
                        }
                    });
                    let price = $(this).find('#price').val() * 1;
                    console.log(price);
                    console.log(typeof price);
                    // console.log(arr);
                    console.log($('.cates').html());
                    // 修改数据
                    $.ajax({
                        method: 'put',
                        url: 'http://121.4.102.44:8083/dish',
                        contentType: "application/json",
                        data: JSON.stringify({
                            id: ids,
                            name: $(this).find('.catename').val(),
                            price: price,
                            image: amgs,
                            categoryId: caid,
                            categoryName: Data.categoryName,
                            code: Data.code,
                            copies: Data.copies,
                            createTime: Data.createTime,
                            createUser: Data.createUser,
                            description: Data.description,
                            flavors: [{ name: $('#demo2').val(), value: JSON.stringify(arr), showOption: false }],
                            price: Data.price,
                            sort: Data.sort,
                            status: Data.status,
                            updateUser: Data.updateUser
                        }),
                        success(res) {
                            console.log(res);
                            if (res.code == 1) {
                                // console.log(res.data);
                                layui.layer.msg(res.data)
                                setTimeout(function() {
                                    $('.return').click();
                                }, 1000)
                            }
                        }
                    })
                })
            }
        })
    }
    //渲染下拉框
    initCate()

    function initCate() {
        $.ajax({
            url: 'http://121.4.102.44:8083/category/list',
            success(res) {
                // if (res.type !== 1) {
                //     return layer.msg(res.message, { icon: 5 })
                // }
                const htmlStr = template('tpl-cate', res)
                    // console.log(htmlStr);
                $('[name=cate_id]').html(htmlStr)
                layui.form.render()
            }
        })
    }

})